<script setup>
import headers from "~/src/components/headers.vue";
import useDataStore from "@/store/index.js";
import { storeToRefs } from "pinia";
import { onMounted, ref } from "vue";
import { getArticleLikeCollectListAPI, getAuthorInfoAPI } from "@/apis/me.js";
import { followListAPI } from "../../apis/follow";
import { useRoute } from "vue-router";
import { judgeFollowAPI, changeFollowAPI } from "@/apis/follow";
import meHeader from "./components/meHeader.vue";

const route = useRoute();

defineOptions({
  name: "Me",
});
/* -------------------------------- 获取用户个人信息 -------------------------------- */
const dataStore = useDataStore();
const { userInfo } = storeToRefs(dataStore);

let { user_id, meType } = route.query;
let backgroundRef = ref();
let authorInfo = ref();
let active = ref(1); // 当前点击的分类
let articleList = ref([]); // 该用户的文章列表
let likeList = ref([]); // 该用户的点赞列表
let collectList = ref([]); // 该用户的收藏列表
let renderList = ref([]); // 渲染列表
let followList = ref([]); //关注列表
let fansList = ref([]); //粉丝列表
let hasFollow = ref(false); // 是否关注
let isMe = ref(false); // 是否自己
let meHeaderFlag = ref(false); //是否展示meHeader

onMounted(() => {
  getAuthorInfo();
  getListAction();
  getFollowList();
});

/* --------------------------------- 获取作者信息 --------------------------------- */
const getAuthorInfo = async () => {
  let data = await getAuthorInfoAPI(user_id);
  if (data.code === 200) {
    authorInfo.value = data.data[0];
    //   backgroundRef.value.style.background = `url(${authorInfo.value.user_avatar})`;
    backgroundRef.value.style.background = `
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(${authorInfo.value.user_avatar})
  `;
    backgroundRef.value.style.backgroundSize = "cover";
    backgroundRef.value.style.backgroundPosition = "center";
    backgroundRef.value.style.backgroundRepeat = "no-repeat";

    judgeFollow();
  }
};

/* ---------------------------------- 点击分类 ---------------------------------- */
// 事先把文章、点赞、收藏列表都请求好
const getListAction = async () => {
  let data = await getArticleLikeCollectListAPI(user_id);
  if (data.code === 200) {
    articleList.value = data.data.articleResult;
    likeList.value = data.data.likeResult;
    collectList.value = data.data.collectResult;
  }
  // renderList.value = articleList.value
  changeAction(Number(meType));
};
const changeAction = (type) => {
  active.value = type;
  switch (type) {
    case 1:
      renderList.value = articleList.value;
      break;
    case 2:
      renderList.value = likeList.value;
      break;
    case 3:
      renderList.value = collectList.value;
      break;
    default:
      renderList.value = articleList.value;
      active.value = 1;
      break;
  }
};

const getFollowList = async () => {
  let res = await followListAPI(user_id);
  if (res.code === 200) {
    followList.value = res.data.followUserList;
    fansList.value = res.data.fansUserList;
  }
};

/* ------------------------------ 判断当前作者是否已经关注 ------------------------------ */
const judgeFollow = async () => {
  let data = await judgeFollowAPI(userInfo.value.user_id, user_id);
  if (data.code === 200) {
    hasFollow.value = true;
    isMe.value = false;
  } else if (data.code === 400) {
    hasFollow.value = false;
  } else if (data.code === 401) {
    isMe.value = true;
  }
};

/* ---------------------------------- 点击关注/取消关注 ---------------------------------- */
const followAction = async () => {
  hasFollow.value = !hasFollow.value;
  let data = await changeFollowAPI(
    userInfo.value.user_id,
    user_id,
    hasFollow.value
  );
  if (data.code === 200) {
    if (data.flag) {
      ElMessage({
        message: "取消关注成功",
        type: "success",
      });
    } else {
      ElMessage({
        message: "关注成功",
        type: "success",
      });
    }
  }
};

/* ------------------------------- 滚动事件------------------------------ */
const scrollHandler = () => {
  if (document.documentElement.scrollTop >= 400) {
    if (!meHeaderFlag.value) {
      meHeaderFlag.value = true;
    }
  } else {
    if (meHeaderFlag.value) {
      meHeaderFlag.value = false;
    }
  }
};
window.addEventListener("scroll", scrollHandler);
</script>

<template>
  <div class="page">
    <div class="container">
      <!-- <div class="headers">
                <headers :userInfo="userInfo"></headers>
            </div> -->
      <div
        class="headers"
        :style="{
          transform: meHeaderFlag ? 'translateY(0px)' : 'translateY(0px)',
        }"
      >
        <meHeader
          :authorInfo="authorInfo"
          :hasFollow="hasFollow"
          :isMe="isMe"
          :articleNum="articleList.length"
        >
        </meHeader>
      </div>
      <div class="temp"></div>
      <div class="background" ref="backgroundRef">
        <div class="background-wrap"></div>
      </div>
      <div class="main">
        <div class="main-user">
          <div class="main-user-info">
            <div class="info-avatar">
              <img :src="authorInfo?.user_avatar" alt="" />
            </div>
            <div class="info-text">
              <div class="text-name">{{ authorInfo?.user_name }}</div>
              <div class="text-introduction">
                {{ authorInfo?.user_introduction }}
              </div>
              <div class="text-num">
                <div class="num-focus" style="margin-right: 20px">
                  关注：{{ followList.length || 0 }}
                </div>
                <div class="num-fans">粉丝：{{ fansList.length || 0 }}</div>
              </div>
            </div>
            <div class="info-btn">
              <div class="btn">
                <el-button
                  v-if="!hasFollow && !isMe"
                  style="width: 100%"
                  color="#626aef"
                  type="primary"
                  @click="followAction"
                >
                  关注</el-button
                >
                <el-button
                  v-else-if="hasFollow && !isMe"
                  style="width: 100%"
                  color="#626aef"
                  type="primary"
                  @click="followAction"
                >
                  <el-icon><Select /></el-icon> 已关注</el-button
                >
              </div>
              <div class="type">
                <!-- <div :class="{ active: active === 1 }" @click="typeAction(1)">文章</div>
                                <div :class="{ active: active === 2 }" @click="typeAction(2)">点赞</div>
                                <div :class="{ active: active === 3 }" @click="typeAction(3)">收藏</div> -->
                <el-tabs
                  v-model="active"
                  class="demo-tabs"
                  @tab-change="changeAction"
                  :stretch="true"
                >
                  <el-tab-pane label="笔记" :name="1"></el-tab-pane>
                  <el-tab-pane label="点赞" :name="2"></el-tab-pane>
                  <el-tab-pane label="收藏" :name="3"></el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </div>
        </div>
        <ul class="main-article">
          <li
            class="article-item"
            v-for="item in renderList"
            :key="item.article_id"
          >
            <div class="item-cover">
              <img :src="item.article_coverimg" alt="" />
            </div>
            <div class="item-title">{{ item.article_title }}</div>
            <div class="item-content">{{ item.article_introduction }}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import url(./me.scss);
</style>
